<template>
  <div id="air" :style="size">
    <div id="content" :style="size">
      <div class="title">
        <font size='3px' color="white">空气质量实时监测数据</font>
      </div>
      <div class="pie">
        <Pie :valuenum="aqi"/>
      </div>
      <div class="line"></div>
      <div class="template">
        <Thermometer :name= "wrwname[0]" :pnum="wrwvalue[0]" :colorstr="colors[0]"/>
        <Thermometer :name= "wrwname[1]" :pnum="wrwvalue[1]" :colorstr="colors[1]"/>
        <Thermometer :name= "wrwname[2]" :pnum="wrwvalue[2]" :colorstr="colors[2]"/>
        <Thermometer :name= "wrwname[3]" :pnum="wrwvalue[3]" :colorstr="colors[3]"/>
        <Thermometer :name= "wrwname[4]" :pnum="wrwvalue[4]" :colorstr="colors[4]"/>
        <Thermometer :name= "wrwname[5]" :pnum="wrwvalue[5]" :colorstr="colors[5]"/>
      </div>
      <div class="address"><font size='1px' color="#fff">单位:μg/m³ (CO为mg/m³)</font> &nbsp;</div>
    </div>
  </div>
</template>

<script>
  import Thermometer from '../smallcomponents/thermometer'
  import Pie from '../smallcomponents/pie'
  import getcolor from '../js/getColor'

  export default {
    name: 'GROUND',
    components: {
      Thermometer, Pie
    },
    data () {
      return {
        colors: ['#f00', '#1f1', '#22f', '#333', '#444', '#555'],
        wrwname: ['PM2.5', 'PM10', 'O3', 'NO2', 'CO', 'SO2'],
        wrwvalue: ['10', '22', '33', '44', '55', '66'],
        aqi: '30',
        orgOptions: {},
        url: this.baseConfig.AirbaseUrl + '/get_FXJsonBySql',
        xml: {'sqldata': 'fxair', 'parameters': []},
        datatime: '12月19日 9时',
        size: {
          width: '100%',
          height: '100%'
        }
      }
    },
    created () {
      this.getData()
    },
    computed: {},
    mounted () {
      this.orgOptions = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }]
      }
    },
    methods: {
      getData () {
        var fileData = new FormData()
        fileData.append('jsonstr', JSON.stringify(this.xml))
        this.axios.post(this.url, fileData).then(response => {
          var data = response.data[0]
          this.$set(this.colors, 0, getcolor.getColor(data.PM25, 'PM25'))
          this.$set(this.colors, 1, getcolor.getColor(data.PM10, 'PM10'))
          this.$set(this.colors, 2, getcolor.getColor(data.O3, 'O3'))
          this.$set(this.colors, 3, getcolor.getColor(data.NO2, 'NO2'))
          this.$set(this.colors, 4, getcolor.getColor(data.CO, 'CO'))
          this.$set(this.colors, 5, getcolor.getColor(data.SO2, 'SO2'))
          this.$set(this.wrwvalue, 0, data.PM25)
          this.$set(this.wrwvalue, 1, data.PM10)
          this.$set(this.wrwvalue, 2, data.O3)
          this.$set(this.wrwvalue, 3, data.NO2)
          this.$set(this.wrwvalue, 4, data.CO)
          this.$set(this.wrwvalue, 5, data.SO2)
          this.aqi = data.AQI
          this.datatime = data.DATETIME
        })
      }
    }
  }
</script>
<style scoped>
  #content {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .title {
    height: 8%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .pie {
    height: 60%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .line {
    height: 0%;
    width: 70%;
    background: white;
  }

  .template {
    height: 25%;
    width: 80%;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-items: center;
  }

  .address {
    height: 4.8%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
</style>
